<template>
  <div class="dep">
    <div class="depContent">
      <img src="../../assets/image/guohui.png"/>
      <div class="depInfo" @click="goDetailPage(data.id, searchType)">
        <p><span style="color:#2385F0;font-weight:700;font-size:14px">名称</span>：<span style="font-size:12px" v-html="hightLight(searchStore.searchValue,data.title)"></span></p>
        <p><span style="color:#2385F0;font-weight:700;font-size:14px">类型</span>：<span style="font-size:12px">{{data.orgType}}</span></p>
        <p><span style="color:#2385F0;font-weight:700;font-size:14px">上级</span>：<span style="font-size:12px">{{data.parentOrgName}}</span></p>
        <p><span style="color:#2385F0;font-weight:700;font-size:14px">范围</span>：{{data.area}}</p>
      </div>
    </div>
    <div class="handle-icons" @click.stop>
        <div
          class="share icon cursor-pointer"
          @click="handleIconClick('share')"
        >
          <svg-icon name="share" size="18px" />
          <span>分享</span>
        </div>
        <div class="view icon">
          <svg-icon name="view" size="24px" />
          <span>{{ cardInfo.vierNum }}</span>
        </div>
        <div class="love icon" @click="handleIconClick('love')">
          <svg-icon
            name="love"
            size="20px"
            :color="cardInfo.isLike * 1 ? 'red' : '#bcc1cb'"
          />
          <span>{{ cardInfo.likeNum }}</span>
        </div>
        <div class="favorite icon" @click="handleIconClick('favorite')">
          <svg-icon
            name="favorite"
            size="22px"
            :color="cardInfo.isCollect * 1 ? '#f2ea57' : '#bcc1cb'"
          />
          <span>{{ cardInfo.collectNum }}</span>
        </div>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.dep{
  width: 16vw;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  /* margin: 10px; */
  margin:0 10px 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .depContent{
    display: flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    margin-bottom:20px;
    img{
      height:60px;
      width:60px;
      margin-right: 20px;
    }
    .depInfo{
      width: 50%;
      cursor: pointer;

      p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .handle-icons {
    white-space:nowrap;
    margin-top: 12px;
    @apply flex items-center;
    .icon {
      @apply flex items-center;
      span {
        @apply ml-2;
      }
    }
    .love,
    .view,
    .share {
      @apply mr-4;
    }
  }
}

</style>

<script setup lang="ts">
import { computed } from "vue";
import {useDepHooks} from './hook'
import { hightLight  } from '@/utils/index'
import { useSearchStore } from "../../store/search";
const searchStore = useSearchStore()

const props = defineProps(["data"]);
const contentList = computed(() => props.data.map((result) => hightLight(result)));

const { cardInfo,handleIconClick,goDetailPage,searchType } = useDepHooks(props);

defineExpose({ cardInfo });
</script>
